<template>
    <div class="userCenter">
        <!--顶部-->
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    title="我的"
                    @click-right="setBtn">
                <van-icon name="chat-o" slot="right" color="#FFF" size="17" />
                <van-icon name="setting-o" slot="right" size="17" :style="{paddingLeft:'10px'}"/>
            </van-nav-bar>
        </div>
        <!--头部-->
        <div class="header page-pad-pk list-item-pad-pk bg-D82D11">
            <div class="d-flex-pk">
                <div class="page-padding-right">
                    <pk-img
                            :src="userInfo.headPortrait"
                            round
                            width="60px"
                            height="60px">
                    </pk-img>
                </div>
                <div class="userInfo">
                   <div class="d-flex-pk">
                       <div class="page-padding-right font-size-18-pk">{{userInfo.nickName || '没有昵称'}}</div>
                       <div class="d-flex-pk userRole">
                           <div>
                               <img v-if="userInfo.roleGrade == 0" class="roleGrade" src="../../assets/images/roleGrade1.png">
                               <img v-if="userInfo.roleGrade == 1" class="roleGrade" src="../../assets/images/roleGrade2.png">
                               <img v-if="userInfo.roleGrade == 2" class="roleGrade" src="../../assets/images/roleGrade3.png">
                               <img v-if="userInfo.roleGrade == 3" class="roleGrade" src="../../assets/images/roleGrade4.png">
                           </div>
                          <div class="font-size-12-pk">
                              {{userInfo.roleName}}
                          </div>
                       </div>
                   </div>
                    <div class="d-flex-pk page-padding">

                        <div v-if="userInfo.sex == 0" class="fa fa-mars"></div>
                        <div v-else class="fa fa-venus"></div>
                        <div class="page-padding-right font-size-13-pk">邀请码:{{userInfo.inviteNumber}}</div>
                        <div class="font-size-12-pk">复制</div>
                    </div>
                    <div class="d-flex-pk page-padding text-center-pk just-content-between">
                        <div class="concernDirct">
                            <div v-if="userStatistic.followNum" class="font-size-14-pk">{{userStatistic.followNum}}</div>
                            <div v-else class="font-size-14-pk">0</div>
                            <div class="font-size-12-pk">关注</div>
                        </div>
                        <div class="concernDirct">
                            <div v-if="userStatistic.followedNum" class="font-size-14-pk">{{userStatistic.followedNum}}</div>
                            <div v-else class="font-size-14-pk">0</div>
                            <div class="font-size-12-pk">粉丝</div>
                        </div>
                        <div>
                            <div v-if="userStatistic.loveNum" class="font-size-14-pk">{{userStatistic.loveNum}}</div>
                            <div v-else class="font-size-14-pk">0</div>
                            <div class="font-size-12-pk">点赞</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="isVip==='0'" class="container item-margin" @click="upVip">
            <img src="../../assets/images/upVip.png" alt="升级VIP" class="upgrade">
        </div>
        <div v-if="isVip=='1'" class="sellWrap page-pad-pk bg-white-pk item-margin border-radius">
            <div class="d-flex-pk text-center-pk just-content-between light-border-bottom-gray sellItem">
                <div>
                    <div class="font-size-20-pk text-light-yellow-pk">{{userInfo.saleMoneyMonth}}</div>
                    <div class="font-size-12-pk text-gray-deep-pk">本月销售(元)</div>
                </div>
                <div class="lineGray"></div>
                <div>
                    <div class="font-size-20-pk text-red-pk">{{userInfo.saleMoneyDay}}</div>
                    <div class="font-size-12-pk text-gray-deep-pk">今日销售(元)</div>
                </div>
                <div class="lineGray"></div>
                <div>
                    <div class="font-size-20-pk text-color-blue-pk">{{userInfo.estimateMoneyDay}}</div>
                    <div class="font-size-12-pk text-gray-deep-pk">今日预计销售(元)</div>
                </div>
            </div>
            <div class="d-flex-pk text-center-pk just-content-between light-border-bottom-gray sellItem">
                <div @click="remainMoney">
                    <div class="font-size-16-pk text-black-pk">{{userInfo.money}}</div>
                    <div class="font-size-12-pk text-gray-deep-pk">余额(元)</div>
                </div>
                <div class="lineGray"></div>
                <div>
                    <div class="font-size-16-pk text-black-pk">{{userInfo.estimateMoneyMonth}}</div>
                    <div class="font-size-12-pk text-gray-deep-pk">本月预计销售(元)</div>
                </div>
                <div class="lineGray"></div>
                <div>
                    <div class="font-size-16-pk text-black-pk">{{userInfo.rewardMoneyTotal}}</div>
                    <div class="font-size-12-pk text-gray-deep-pk">累计收益(元)</div>
                </div>
            </div>
            <div class="goodsShareNum font-size-14-pk text-light-pk">共推荐<span class="text-red-pk">{{userInfo.goodsShareNum}}</span>款商品</div>
        </div>
        <div v-if="isVip=='1'" class="userItems item-margin bg-white-pk border-radius">
            <van-cell is-link >
                <!-- 使用 title 插槽来自定义标题 -->
                <template slot="title">
                    <div class="d-flex-pk">
                        <div class="page-padding-right">
                            <img src="../../assets/images/userInvitation.png" alt="inviteImg" class="inviteImg"/>
                        </div>
                        <div class="">
                            <div class="text-red-pk font-size-14-pk">邀请新用户</div>
                            <div class="text-color-gray font-size-13-pk">购物返利</div>
                        </div>
                    </div>
                </template>
            </van-cell>
        </div>
        <div class="userItems item-margin bg-white-pk border-radius">
            <div @click="myOrder">
                <van-cell value="全部订单" value-class="allOrder" is-link>
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template slot="title">
                        <span class="font-size-15-pk">我的订单</span>
                    </template>
                </van-cell>
            </div>
            <div class="d-flex-pk just-content-between page-pad-pk text-center-pk font-size-13-pk">
                <div class="orderItems " @click="waitPay">
                    <div>
                        <img src="../../assets/images/waitpayIcon.png" alt="waitPay" class="iconImg">
                    </div>
                    <div class="text-gray-deep-pk ">
                        待付款
                    </div>
                    <div class="orderNum" v-if="userInfo.waitReceiveOrderNum">
                        {{userInfo.waitPayOrderNum}}
                    </div>
                </div>
                <div class="orderItems" @click="waitDeliver">
                    <div>
                        <img src="../../assets/images/waitDeliverIcon.png" alt="waitPay" class="iconImg">
                    </div>
                    <div class="text-gray-deep-pk ">
                        待发货
                    </div>
                    <div class="orderNum " v-if="userInfo.waitSendOrderNum">
                        {{userInfo.waitSendOrderNum}}
                    </div>
                </div>
                <div class="orderItems" @click="waiteReceive">
                    <div>
                        <img src="../../assets/images/waiteReceiveIcon.png" alt="waitPay" class="iconImg">
                    </div>
                    <div class="text-gray-deep-pk">
                        待收货
                    </div>
                    <div class="orderNum" v-if="userInfo.waitReceiveOrderNum">
                        {{userInfo.waitReceiveOrderNum}}
                    </div>
                </div>
                <div class="orderItems" @click="afterMarket">
                    <div>
                        <img src="../../assets/images/afterMarketIcon.png" alt="waitPay" class="iconImg">
                    </div>
                    <div class="text-gray-deep-pk">
                        待评价
                    </div>
                </div>
            </div>
        </div>
        <div v-if="isVip" class="userItems item-margin bg-white-pk border-radius font-size-14-pk">
            <van-cell center title="我的拼团" class="item" :icon="require('@img/myGroup.png')" is-link to="/group/OrderList"></van-cell>
            <van-cell v-if="isVip=='0'" center title="成为VIP会员" class="item" value="立即升级" value-class="valueClass" :icon="require('@img/myGroup.png')" is-link></van-cell>
            <van-cell v-if="isVip=='1'" center title="我的礼包" class="item" :icon="require('@img/myGift.png')" is-link to="/product/orderList"></van-cell>
            <van-cell v-if="isVip=='1'" center title="我的跑屏" class="item" :icon="require('@img/myRunScreen.png')" is-link @click="toMyTaskList"></van-cell>
            <van-cell v-if="isVip=='1'" center title="我的小店" class="item" :icon="require('@img/myShop.png')" is-link></van-cell>
            <van-cell v-if="isVip=='1'" center title="我的战队" class="item" :icon="require('@img/myTeam.png')" is-link></van-cell>
        </div>
        <div class="userItems  item-margin bg-white-pk border-radius font-size-14-pk">
            <van-cell v-if="isVip=='1'" center title="业绩中心" class="item" :icon="require('@img/myResults.png')" is-link to="myResult"></van-cell>
            <van-cell center title="我的钱包" class="item" :icon="require('@img/myWallet.png')" is-link to="moneyPackage"></van-cell>
            <van-cell center title="我的收藏" class="item" :icon="require('@img/myCollection.png')" is-link></van-cell>
            <van-cell center title="我的足迹" class="item" :icon="require('@img/myFootPrint.png')" is-link></van-cell>
        </div>
        <div class="userItems item-margin bg-white-pk border-radius font-size-14-pk pad-bottom-page">
            <van-cell center title="收货地址" class="item" :icon="require('@img/myAddress.png')" is-link to="addressList"></van-cell>
            <van-cell center title="客服与帮助"  class="item" :icon="require('@img/myCustomerService.png')" is-link @click="handleService"></van-cell>
        </div>
        <div class="serviceQR">
            <van-popup v-model="showServiceQR" :style="{ height: '400px',width:'300px' }">
                <div class="">
                    <img src="../../assets/images/serviceQr.jpg" alt="serviceQR">
                </div>
            </van-popup>
        </div>
    </div>
</template>
<script>
    import PkImg from "../../components/PkImg";
    export default {
        name:"userCenter",
        title: "我的",
        data(){
            return{
                userInfo:{},
                userStatistic: {
                    "followNum": 0,
                    "followedNum": 0,
                    "loveNum": 0,
                    "squareNum": 0,
                    "userId": ""
                },
                userId:"",
                isVip:0,
                showServiceQR:false,
            }
        },
        components:{
            PkImg
        },
        created(){
            this.getUserInfo();

        },
        methods:{
            //获取用户信息
            getUserInfo(){
                this.$api.getUserInfo('1').then(res=>{
                    let result=this.$resData(res);
                    if(result){
                        this.userInfo=result;
                        this.userStatistic=result.userStatistic;
                        this.isVip = this.userInfo.isVip;
                    }
                })
            },
            //跳转到获取所有订单
            myOrder(){
                this.$router.push({
                    name:"orderList",
                    params:{
                        tabsType:0,
                        status:""
                    }
                })
            },
            //查看余额
            remainMoney(){
                this.$router.push({
                    name:"remainMoney"
                })
            },
            //待付款
            waitPay(){
                this.$router.push({
                    name:"orderList",
                    params:{
                        tabsType:"1",
                        status:"0"
                    }
                })
            },
            //待收货
            waiteReceive(){
                this.$router.push({
                    name:"orderList",
                    params:{
                        tabsType:"3",
                        status:"3"
                    }
                })
            },
            //待发货
            waitDeliver(){
                this.$router.push({
                    name:"orderList",
                    params:{
                        tabsType:"2",
                        status:"1"
                    }
                })
            },
            //待评价
            afterMarket(){
                this.$router.push({
                    name:"orderList",
                    params:{
                        tabsType:"4",
                        status:"4"
                    }
                })
            },
            //设置
            setBtn(){
                this.$router.push({
                    name:"userSetting"
                })
            },
            //升级vip
            upVip(){
                this.$router.push({
                    name:"/product/index"
                })
            },
            //我的客服和帮助
            handleService(){
                this.showServiceQR=true

            },
            //复制
            pkClipboard(data) {
                this.$hybridCommon.pkClipboard(data)
            },
            //我的跑屏列表
            toMyTaskList(){
                this.$router.push({
                    path:"/task/myTaskList"
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
    .userCenter{
        line-height: 1.6;
        .page-padding{
            padding: 10px 0;
        }
        .item-margin{
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 10px;
        }
        .text-align-left{
            text-align: left;
        }
        .just-content-between{
            justify-content: space-between;
        }
       .justify-content-around{
            justify-content: space-around;
        }
        .page-padding-right{
            padding-right: 10px;
        }
        .text-color-gray{
            color: rgba(0, 0, 0, 0.5);
        }
        .text-primary {
            color: #007bff;
        }
        .text-warning {
            color: #e69730 ;
        }
        .border-radius{
            border-radius: 4px;
        }
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }
        .header{
            padding-top: 55px;
            color: #fff;
            .concernDirct{
                padding-right: 40px;
            }
            .headerImg{
                width:60px;
                height: 60px;
                border-radius: 50%;
            }
            .userInfo{
                .userRole{
                    align-items: center;
                    height:20px;
                    background: rgba(185, 45, 22, 0.7);
                    border-radius:20px;
                    padding: 3px 10px;
                    .roleGrade{
                        margin-right: 2px;
                        padding-top: 10px;
                        width: 15px;
                        height:15px;
                    }
                }
            }
        }
        .container {
            .upgrade{
                width: 100%;
            }
        }
        .sellWrap{
           .sellItem{
               padding: 10px 0;
               .lineGray{
                   margin-top: 20px;
                   height: 20px;
                   border-right: 1px solid #EDEDED;
               }
           }
            .goodsShareNum{
                padding:10px 0;
            }
        }
        .userItems{
            .orderItems{
                position: relative;
                padding: 5px 10px;
                .orderNum{
                    position: absolute;
                    top: -3px;
                    left: 36px;
                    width: 20px;
                    height: 20px;
                    border-radius:50%;
                   // border:1px solid #E02511;
                    background-color: #D82D11;
                    font-size: 12px;
                    color: #fff;
                }
            }
            .myIcon{
                width: 20px;
                height: 20px;
                padding-right: 5px;
            }
            .iconImg{
                padding-right: 10px;
                width: 30px;
                height: 29px;
            }
            .inviteImg{
                width: 40px;
                height: 40px;
            }
            .item{
                font-size: 14px;
                color: #4D4D4D;
                img{
                    width: 20px;
                    height: 20px;
                }
            }
            .allOrder{
                font-size: 13px;
                color: #D82D11;
            }
            .valueClass{
                font-size: 13px;
                color:#999999;
            }

        }
        .serviceQR{
            img{
                position: fixed;
                width: 100%;
                top: 0;
                left: 0;
                right: 0;
            }
        }
        .pad-bottom-page{
            padding-bottom: 50px;
        }
    }
</style>
